iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
4
Modern Web

重新認識 Flex 和 Grid系列 第 5

[Day05] Flexbox 彈性容器

  • 分享至 

  • xImage
  •  
.container {
    display: flex | inline-flex;
}

上一篇提到當我們對 container 宣告 display: flexinline-flex 時,container 便會成為彈性容器,而其子層 item 會成為彈性項目,接下來我們會針對彈性容器的部分做介紹


彈性容器之屬性值 flex 和 inline-flex 的差別

display: flex;

https://ithelp.ithome.com.tw/upload/images/20200919/20128346CVRGR1cst5.png

當在 display 屬性宣告 flex,如果沒有設定寬高,可以看到彈性容器像 block 一樣佔據了整行。

https://ithelp.ithome.com.tw/upload/images/20200919/20128346CFJFPqqH96.png

如果出現第二個彈性容器,它就會像 block 把第二個彈性容器移到下一行(真的有換行啦,只是顏色一樣黏在一起了)。


display: inline-flex;

https://ithelp.ithome.com.tw/upload/images/20200919/20128346hrbHeZoTsl.png

當在 display 屬性宣告 inline-flex,如果沒有設定寬高,可以看到彈性容器像 inline-block 一樣被子層彈性項目的尺寸撐開。

https://ithelp.ithome.com.tw/upload/images/20200919/20128346DT1hCSOwXG.png

如果出現第二個彈性容器,它就會像 inline-block 和第二個彈性容器併排,而且彈性容器也可以像 inline-block 一樣有調整尺寸的特性(我在這邊沒設定尺寸,你可以自己試試),甚至也有繼承那個奇怪空隙的特性(我並沒有在兩個彈性容器之間加上間距)。

https://ithelp.ithome.com.tw/upload/images/20200919/20128346FzqxGTYqzi.png

如果你將畫面縮小的話,彈性容器會因為 "畫面寬度" < "所有彈性容器的總寬度" 而自動換行,所以會看起來像是有換行的 block,但這其實是 inline-block 的特性。


很像 block / inline-block,但仍舊是彈性容器

Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout.CSS Flexible Box Layout Module Level 1

文件清楚說明了 flex/inline-flex 很像 block/inline-block 但其實不是的這個事實,他們的差別如:

  1. float 和 clear 無法使用於彈性容器內
  2. vertical-align 對彈性項目沒有效果(但對彈性項目裡面的內容還是有用的)
  3. 偽元素 ::first-line 和 ::first-letter 無法使用於彈性容器本身

結論

不管是宣告屬性值 flex 或 inline-flex ,這兩者都會讓子層變為彈性項目,既而可以用 flexbox 的屬性操控彈性項目。接下來幾篇會介紹彈性容器的相關屬性。


資料來源:


上一篇
[Day04] Flexbox 基本認識
下一篇
[Day06] 軸向概念 / flex-direction
系列文
重新認識 Flex 和 Grid30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言